<template>
  <div id="app">
    <header class="header">
      <i v-if="!flag" class="iconfont icon-ic_menu" @click="toggle(true)"></i>
      <i v-if="flag" class="iconfont icon-ic_back" @click="back()"></i>
    </header>
    <aside class="aside" :class="{open:open,docked:docked}" @click="toggle()">
      <ul>
        <li :class="{chose:num == 1}" @click="change(1)">
          <span>首页</span>
          <i class="iconfont" :class="{'iconcolor icon-ic_star_black':num == 1,'icon-ic_star':num != 1}"></i>
        </li>
        <li :class="{chose:num == item.id}" v-for="(item, value) in list" @click="change(item.id)">
          <span>{{item.name}}</span>
          <i class="iconfont "
             :class="{'iconcolor icon-ic_star_black':num == item.id,'icon-ic_star':num != item.id}"></i>
        </li>
        <li @click="project()">
          <span>项目地址</span>
          <i class="iconfont icon-github"></i>
        </li>
      </ul>
      <div class="cover" @touchmove="prevent"></div>
    </aside>
    <div v-if="circle" class="circle" @click="top()">
      <i class="iconfont icon-ic_top"></i>
    </div>
    <transition :name="transitionName">
      <keep-alive>
        <router-view class="app-view" :class="{'app-view-hidden':docked}"/>
      </keep-alive>
    </transition>
  </div>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  import api from './api/index'

  export default {
    data() {
      return {
        list: [],
        timer: '',
        open: false,
        docked: false,
        transitionName: 'slide-left'
      }
    },
    computed: mapState({
      circle: state => state.circleFlag,
      num: state => state.num,
      flag: state => state.drawer
    }),
    mounted: function () {
      let this_ = this;
      api.getTopics().then((data) => {
        this_.list = data.data.others;
      })
    },
    methods: {
      toggle() {
        if (!this.open) {
          this.docked = true;
          this.open = true;
        } else {
          this.open = false;
          let this_ = this;
          setTimeout(() => {
            this_.docked = false;
          }, 300);
        }
      },
      back(n) {
        if (n) {
          this.$router.push({
            path: 'home'
          });
        } else {
          window.history.back();
        }
      },
      prevent(event) {
        event.preventDefault()
        event.stopPropagation()
      },
      change(id) {
        //因为接口问题，所以theme页面的数据拿不到，导致跳转页没有数据，所以这里直接屏蔽theme页面跳转
//        let path = id == 1 ? 'home' : 'theme';
//        this.$router.push({
//          path: path,
//          query: {
//            id: id || ""
//          }
//        });
//        this.$store.commit('add', id);

        this.$router.push({
          path: '/'
        })
      },
      project() {
        window.location.href = 'https://gitee.com/xiariqingfeng/vue2.x-daili';
      },
      top() {
        let this_ = this;
        let dom = document.querySelector('.app-view');
        let height = dom.scrollTop;
        let scrollTop = parseInt(height / 50);
        let timer = setInterval(() => {
          height -= scrollTop;
          if (height <= 0) {
            dom.scrollTop = 0;
            this_.$store.commit('toggle');
            clearInterval(timer);
          } else {
            dom.scrollTop = height;
          }
        }, 1)
      },
    },
    watch: {
      // `to` 和 `from` 都是路由对象
      '$route'(to, from) {
        let this_ = this;
        this.timer = setTimeout(() => {
          if (this_.open) {
            this_.open = false;
            this_.docked = false;
          }
          clearTimeout(this_.timer);
        }, 300);
        to.path == '/' && this.num != 1 && this.$store.commit('add', 1);
        this.transitionName = to.path != "/article" ? 'slide-right' : 'slide-left';
      }
    }
  }
</script>

<style lang="less">
  .slide-left-enter,
  .slide-right-leave-active {
    opacity: 0;
    -webkit-transform: translate(50vw, 0);
  }

  .slide-left-leave-active,
  .slide-right-enter {
    opacity: 0.1;
    -webkit-transform: translate(-50vw, 0);
  }

  .app-view {
    z-index: 1;
    width: 100vw;
    height: 100vh;
    overflow: auto;
    position: absolute;
    transition: transform 0.3s ease;
    -webkit-overflow-scrolling: touch;
  }

  .app-view-hidden {
    overflow: hidden;
  }

  .header {
    width: 100%;
    height: 1.5rem;
    z-index: 9;
    padding-left: 5%;
    position: fixed;
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.51) 95%);
    .iconfont {
      color: #fff;
      font-size: 0.8rem;
      top: 20%;
      position: relative;
    }
  }

  .aside {
    z-index: 11;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: fixed;
    visibility: hidden;
    &::-webkit-scrollbar {
      display: none !important;
      width: 0 !important;
      height: 0 !important;
      -webkit-appearance: none;
      opacity: 0 !important;
    }
    ul {
      margin: 0;
      float: left;
      width: 60%;
      height: 100%;
      padding: 1.3rem 0.5rem 0.5rem;
      overflow: auto;
      background: rgba(91, 116, 146, 0.75);
      transform: translate(-100%, 0);
      transition: transform 0.3s ease;
      -webkit-overflow-scrolling: touch;
      &::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        -webkit-appearance: none;
        opacity: 0 !important;
      }
    }
    li {
      cursor: pointer;
      font-size: 0.43rem;
      list-style: none;
      color: #fff;
      margin-top: 20px;
      .iconfont {
        float: right;
        font-size: 0.6rem;
      }
      &.chose {
        color: #FFD300;
      }
    }
    .cover {
      width: 100%;
      height: 100%;
      opacity: 0;
      display: none;
      background: rgba(172, 185, 201, 0.40);
      transition: opacity 0.3s ease;
    }
    &.open {
      ul {
        transform: translate(0);
      }
      .cover {
        opacity: 1;
      }
    }
    &.docked {
      visibility: visible;
      .cover {
        display: block;
      }
    }
  }

  .circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.80);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.50);
    right: 5%;
    bottom: 5vw;
    position: fixed;
    z-index: 10;
    i {
      top: 50%;
      left: 50%;
      font-size: 0.6rem;
      color: #ACB9C9;
      transform: translate(-50%, -50%);
      position: absolute;
    }
  }

  @media screen and (min-width: 640px) {
    .app-view {
      width: 640px;
      left: 50%;
      transform: translate(-50%, 0);
    }

    .aside ul {
      width: 350px;
    }
  }
</style>
